/**
 * Created by hsia on 2017/8/2.
 */
;(function ($) {
    $.fn.extend({
        ImgLoading: function (options) {
            var defaults = {
                errorimg: "/images/404-pic.png",
                loadimg: "/images/progressbar_microsoft.gif",
                Node: $(this).find("img"),
                timeout: 1000,
                targetObj:null
            };
            var options = $.extend(defaults, options);
            var Browser = new Object();
            // 定义图像的实际尺寸、
            var native_width = 0;
            var native_height = 0;
            var plus = {
                BrowserVerify:function(){
                    Browser.userAgent = window.navigator.userAgent.toLowerCase();
                    Browser.ie = /msie/.test(Browser.userAgent);
                    Browser.Moz = /gecko/.test(Browser.userAgent);
                },
                EachImg: function () {
                    defaults.Node.each(function (i) {
                        var img = defaults.Node.eq(i);
                        plus.LoadEnd(Browser, img.attr("imgurl"), i, plus.LoadImg);
                    })
                },
                LoadState:function(){
                    defaults.Node.each(function (i) {
                        var img = defaults.Node.eq(i);
                        var url = img.attr("src");
                        img.attr("imgurl", url);
                        img.attr("src",defaults.loadimg);
                    })
                },
                LoadEnd: function (Browser, url, imgindex, callback) {
                    var val = url;
                    var img = new Image();
                    if (Browser.ie) {
                        img.onreadystatechange = function () {
                            if (img.readyState == "complete" || img.readyState == "loaded") {
                                callback(img, imgindex);
                            }
                        }
                    } else if (Browser.Moz) {
                        img.onload = function () {
                            if (img.complete == true) {
                                callback(img, imgindex);
                            }
                        }
                    }
                    img.onerror = function () { img.src = defaults.errorimg }
                    img.src = val;
                },
                LoadImg: function (obj, imgindex) {
                    setTimeout(function () {
                        if(!(new RegExp('/images/load-error.png').test(obj.src))){
                            //defaults.Node.eq(imgindex).attr("width", $(defaults.Node.eq(imgindex)).parent()[0].clientWidth+'px');
                            //defaults.Node.eq(imgindex).attr("height", $(defaults.Node.eq(imgindex)).parent()[0].clientHeight+'px');
                            defaults.Node.eq(imgindex).load(function(){
                                var $this = this;
                                // 这里我们需要重新创建一个和之前相同的图像对象、
                                // 因为我们不能直接获得图像尺寸的宽高、
                                // 因为我们在HTML里已经指定了图片宽度为200px、
                                var img_obj = new Image();
                                img_obj.src = $($this).attr('src');
                                //  在这里这段代码写在这里是非常有必要的、
                                //  如果在图像加载之前就访问的话、return的宽高值为0、
                                //native_width = img_obj.width;
                                //native_height = img_obj.height;
                                // 现在、我来开始写鼠标移动的函数、mousemove()
                                /*$($this.parentNode).mousemove(function(e){
                                    // 获得鼠标X轴和Y轴的坐标
                                    //  先获得magnify相对与document的定位position
                                    var magnify_offset = $(this).offset();
                                    // 这里我们用鼠标相对与文档的位置减去鼠标相对于magnify这个人容器的位置 来得到鼠标的位置
                                    var mouse_x = e.pageX - magnify_offset.left;
                                    var mouse_y = e.pageY - magnify_offset.top;
                                    // 现在、我们来调整一下放大镜的隐藏与显示、
                                    if( mouse_x > 0 && mouse_y > 0 && mouse_x < $(this).width() && mouse_y < $(this).height() ){
                                        $($this).prev().fadeIn(100);
                                    }else{
                                        $($this).prev().fadeOut(100);
                                    }
                                    if($($this).prev().is(':visible')){
                                        // 放大镜图片背景的定位是根据鼠标在小图片上改变的位置来改变的、
                                        // 因此、我们应该先得到放大的比例、来定位这个放大镜里背景图片的定位、
                                        /!*
                                         var ratio_x = mouse_x/$('.small').width();//得到的是缩放的比例
                                         var large_x = ratio_x*native_width;
                                         // 我们需要让它在放大镜的中间位置显示、
                                         large_x = large_x - $('.large').width()/2;
                                         // 因为背景图片的定位、这里需要转化为负值、
                                         large_x = large_x*-1;
                                         // 现在我们来整合一下所有的计算步骤、
                                         *!/
                                        var rx = Math.round(mouse_x/$this.width*native_width - $($this).prev().width()/2)*-1;
                                        var ry = Math.round(mouse_y/$this.height*native_height - $($this).prev().height()/2)*-1;
                                        var bgp = rx + 'px ' + ry + 'px';
                                        // 现在我们应该来写放大镜跟随鼠标的效果、
                                        // 放大镜移动的位置 相对于文档的位置 减去 放大镜相对于放大这个层的offset的位置、
                                        // 再减去放大镜宽高的一半、保证放大镜的中心跟随鼠标
                                        var gx = mouse_x - $($this).prev().width()/2;
                                        var gy = mouse_y - $($this).prev().height()/2;
                                        $($this).prev().css({
                                            'left':gx,
                                            'top':gy,
                                            'backgroundPosition':bgp,
                                            'background':'url(' + $this.src + ') no-repeat'
                                        })
                                    }
                                });*/
                            });
                        }
                        defaults.Node.eq(imgindex).attr("src", obj.src);
                        $(defaults.Node.eq(imgindex)).smartZoom({'containerClass':'zoomableContainer'});

                    }, defaults.timeout);

                },
               /* magnify:function () {
                    debugger;
                    // 定义图像的实际尺寸、
                    var native_width = 0;
                    var native_height = 0;
                    // 首先、我们应该获得图像的实际尺寸、（本地的图片）
                    defaults.targetObj.find('.small').load(function(){
                        // 这里我们需要重新创建一个和之前相同的图像对象、
                        // 因为我们不能直接获得图像尺寸的宽高、
                        // 因为我们在HTML里已经指定了图片宽度为200px、
                        var img_obj = new Image();
                        img_obj.src = $(this).attr('src');
                        //  在这里这段代码写在这里是非常有必要的、
                        //  如果在图像加载之前就访问的话、return的宽高值为0、
                        native_width = img_obj.width;
                        native_height = img_obj.height;
                        // 现在、我来开始写鼠标移动的函数、mousemove()
                        defaults.targetObj.find('.imgInfoBox').mousemove(function(e){
                            // 获得鼠标X轴和Y轴的坐标
                            //  先获得magnify相对与document的定位position
                            var magnify_offset = $(this).offset();
                            // 这里我们用鼠标相对与文档的位置减去鼠标相对于magnify这个人容器的位置 来得到鼠标的位置
                            var mouse_x = e.pageX - magnify_offset.left;
                            var mouse_y = e.pageY - magnify_offset.top;
                            // 现在、我们来调整一下放大镜的隐藏与显示、
                            if( mouse_x > 0 && mouse_y > 0 && mouse_x < $(this).width() && mouse_y < $(this).height() ){
                                defaults.targetObj.find('.large').fadeIn(100);
                            }else{
                                defaults.targetObj.find('.large').fadeOut(100);
                            }
                            if(defaults.targetObj.find('.large').is(':visible')){
                                // 放大镜图片背景的定位是根据鼠标在小图片上改变的位置来改变的、
                                // 因此、我们应该先得到放大的比例、来定位这个放大镜里背景图片的定位、
                                /!*
                                 var ratio_x = mouse_x/$('.small').width();//得到的是缩放的比例
                                 var large_x = ratio_x*native_width;
                                 // 我们需要让它在放大镜的中间位置显示、
                                 large_x = large_x - $('.large').width()/2;
                                 // 因为背景图片的定位、这里需要转化为负值、
                                 large_x = large_x*-1;
                                 // 现在我们来整合一下所有的计算步骤、
                                 *!/
                                var rx = Math.round(mouse_x/defaults.targetObj.find('.small').width()*native_width - defaults.targetObj.find('.large').width()/2)*-1;
                                var ry = Math.round(mouse_y/defaults.targetObj.find('.small').height()*native_height - defaults.targetObj.find('.large').height()/2)*-1;
                                var bgp = rx + 'px ' + ry + 'px';
                                // 现在我们应该来写放大镜跟随鼠标的效果、
                                // 放大镜移动的位置 相对于文档的位置 减去 放大镜相对于放大这个层的offset的位置、
                                // 再减去放大镜宽高的一半、保证放大镜的中心跟随鼠标
                                var gx = mouse_x - defaults.targetObj.find('.large').width()/2;
                                var gy = mouse_y - defaults.targetObj.find('.large').height()/2;
                                defaults.targetObj.find('.large').css({
                                    'left':gx,
                                    'top':gy,
                                    'backgroundPosition':bgp
                                })
                            }
                        })
                    })
                    // 最后、我们来把这个mousemove()这个函数来放在这个load这个函数里
                }*/
            }
            plus.LoadState();
            plus.BrowserVerify();
            plus.EachImg();
        }
    });
})(jQuery);